<table>
   <tr>
      <td>Favorite color:</td>
      <td><input type='text' id='favcolor'></td>
   </tr>
   <tr>
      <td>Favorite food:</td>
      <td><input type='text' id='favfood'></td>
   </tr>
</table>
<button id='loadbutton'>Load</button>  
<button id='savebutton'>Save</button>  
<button id='delbutton'>Delete</button><br>
<span id='status'></span>
<script type='text/javascript'>
// This sample demonstrates loading and saving OpenSocial AppData
// It displays two fields: favorite color and favorite food, and allows
// the user to load/save/delete them

var txt_favcolor, txt_favfood, span_status;
var idspec_string = opensocial.IdSpec.PersonId.VIEWER;
var idspec_object = opensocial.newIdSpec( { 'userId': 'VIEWER' } );

function init() {
   txt_favcolor = document.getElementById('favcolor');
   txt_favfood  = document.getElementById('favfood');
   span_status  = document.getElementById('status');

   // attach event listener to the buttons
   document.getElementById('loadbutton').addEventListener('click', loadPrefs, false);
   document.getElementById('savebutton').addEventListener('click', savePrefs, false);
   document.getElementById('delbutton').addEventListener('click', delPrefs, false);
}

function setStatus(s) {
   span_status.innerHTML = s;
   debug.say(s);
}

function loadPrefs() {
   var req = opensocial.newDataRequest();
   var fields = [ "favcolor", "favfood" ];

   req.add(req.newFetchPersonRequest(idspec_string), "viewer");
   req.add(req.newFetchPersonAppDataRequest(idspec_object, 
       fields), "appdata");
   req.send(onDataReceived);
   setStatus("Request sent. Waiting for reply...");
}

function onDataReceived(data) {
   if (data.hadError()) {
      setStatus("*** ERROR: " + data.getErrorMessage());
      // handle error here
      return;
   }

   var viewer = data.get('viewer').getData();
   var appdata = data.get('appdata').getData();

   if (!appdata) {
      setStatus("No data to load.");
      return;
   }

   // appdata is a dictionary keyed by OpenSocial ID
   var viewerData = appdata[viewer.getId()];

   if (!viewerData) {
      setStatus("No data to load.");
      return;
   }

   var favcolor = viewerData["favcolor"];
   var favfood  = viewerData["favfood"];

   txt_favcolor.value = favcolor;
   txt_favfood.value = favfood;

   setStatus("Loaded successfully.");
}

function savePrefs() {
   var req = opensocial.newDataRequest();

   req.add(req.newUpdatePersonAppDataRequest(
       idspec_string, "favcolor", txt_favcolor.value));
   req.add(req.newUpdatePersonAppDataRequest(
       idspec_string, "favfood", txt_favfood.value));

   req.send(onDataSaved);
   setStatus("Request sent. Waiting for reply...");
};

function onDataSaved(data) {
   if (data.hadError()) {
      setStatus("*** error saving: " + data.getErrorMessage());
      // handle error here
      return;
   }
   setStatus("Saved successfully.");
}

function delPrefs() {
   var req = opensocial.newDataRequest();
   req.add(req.newRemovePersonAppDataRequest(
      idspec_string, [ "favcolor", "favfood"]), 'data');
   req.send(onDataDeleted);
   setStatus("Deletion request sent, waiting for reply...");
}

function onDataDeleted(data) {
   setStatus(data.hadError() ? "*** error deleting data: " 
     + data.getErrorMessage() : "Data deleted");
}

gadgets.util.registerOnLoadHandler(init);
</script>
